<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">
		.container {
		  border: 1px solid blue;
		  height: 200px; /* maybe any height */
		  margin: 10px; /* not important */
		}

		.vertical {
		  position: relative;
		  top: calc(50% - 50px);
		  border: 1px solid green;
		  height: 100px;
		}
	</style>	
</head>
<body>
	<div class="container">
	  <div class="vertical">
	    <p>
	      Finally Centered!
	    </p>
	  </div>
	</div>
</body>
</html>